<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Path Editing</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var values = {
			paths: 100,
			minPoints: 5,
			maxPoints: 15,
			minRadius: 30,
			maxRadius: 90
		};

		var hitOptions = {
			segments: true,
			stroke: true,
			fill: true,
			tolerance: 5
		};

		var radiusDelta = values.maxRadius - values.minRadius;
		var pointsDelta = values.maxPoints - values.minPoints;
		for (var i = 0; i < values.paths; i++) {
			var radius = values.minRadius + Math.random() * radiusDelta;
			var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
			var path = createBlob(view.size * Point.random(), radius, points);
			var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
			var hue = Math.random() * 360;
			path.style = {
				fillColor: new HslColor(hue, 1, lightness),
				strokeColor: 'black'
			};
		};

		function createBlob(center, maxRadius, points) {
			var path = new Path();
			path.closed = true;
			for (var i = 0; i < points; i++) {
				var delta = new Point({
					length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
					angle: (360 / points) * i
				});
				path.add(center + delta);
			}
			path.smooth();
			return path;
		}

		var segment, path;
		var movePath = false;
		function onMouseDown(event) {
			segment = path = null;
			var hitResult = project.hitTest(event.point, hitOptions);

			if (event.modifiers.shift) {
				if (hitResult.type == 'segment') {
					hitResult.segment.remove();
				};
				return;
			}

			if (hitResult) {
				path = hitResult.item;
				if (hitResult.type == 'segment') {
					segment = hitResult.segment;
				} else if (hitResult.type == 'stroke') {
					var location = hitResult.location;
					segment = path.insert(location.index + 1, event.point);
					path.smooth();
				}
			}
			movePath = hitResult.type == 'fill';
			if (movePath)
				project.activeLayer.addChild(hitResult.item);
		}

		function onMouseMove(event) {
			var hitResult = project.hitTest(event.point, hitOptions);
			project.activeLayer.selected = false;
			if (hitResult && hitResult.item)
				hitResult.item.selected = true;
		}

		function onMouseDrag(event) {
			if (segment) {
				segment.point = event.point;
				path.smooth();
			}

			if (movePath)
				path.position += event.delta;
		}
	</script>
</head>
<body style="background:black">
	<canvas id="canvas" resize></canvas>
</body>
</html>